<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fluenty Survey</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
          'Helvetica Neue', sans-serif;
        background-color: #ffffff;
        max-width: 600px;
        margin: 0 auto;
      }

      .container {
        height: 90vh;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .nav-progress-container {
        display: flex;
        align-items: center;
        margin-bottom: 40px;
        gap: 15px;
      }

      .back-button {
        width: 30px;
        height: 30px;
        border: none;
        background: none;
        cursor: pointer;
        color: #2b85e4;
        font-size: 20px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .back-button svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
      }

      .progress-bar {
        flex: 1;
        height: 6px;
        background-color: #e0e0e0;
        border-radius: 3px;
      }

      .progress {
        height: 100%;
        width: 66.6%;
        background-color: #2b85e4;
        border-radius: 3px;
      }

      .question-title {
        font-size: 32px;
        font-weight: bold;
        color: #0b4983;
        margin-bottom: 40px;
        line-height: 1.3;
        text-align: center;
      }

      .options {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 50px;
      }

      .option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        background-color: #fff;
        cursor: pointer;
        font-size: 18px;
        color: #333;
      }

      .option:hover {
        border-color: #e0e0e0;
      }

      .option-content {
        display: flex;
        align-items: center;
        gap: 15px;
      }

      .option-icon {
        font-size: 24px;
        color: #666;
      }

      .option-text {
        font-weight: 500;
      }

      .radio {
        width: 24px;
        height: 24px;
        border: 2px solid #e0e0e0;
        border-radius: 50%;
      }

      .option.selected .radio {
        border-color: #e0e0e0;
        position: relative;
      }

      .option.selected .radio::after {
        content: '';
        position: absolute;
        width: 12px;
        height: 12px;
        background-color: #2b85e4;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .continue-button.disabled {
        background-color: #d1e6ff;
        cursor: not-allowed;
      }

      .continue-button {
        background-color: #3b82f6;
        color: white;
        border: none;
        border-radius: 12px;
        padding: 18px;
        font-size: 18px;
        font-weight: bold;
        width: 100%;
        cursor: pointer;
        text-align: center;
      }

      .continue-button:hover {
        background-color: #2563eb;
      }

      /* 为第三个选项添加蓝色背景 */
      /* 第三个选项默认不选中 */
      .option:nth-child(3) {
        background-color: #fff;
        border-color: #e0e0e0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div>
        <div class="nav-progress-container">
          <button class="back-button">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
            </svg>
          </button>
          <div class="progress-bar">
            <div class="progress"></div>
          </div>
        </div>

        <div class="question-title">What area would you like to improve?</div>

        <div class="options">
          <div class="option">
            <div class="option-content">
              <span class="option-icon">🗣️</span>
              <span class="option-text">Speaking</span>
            </div>
            <div class="radio"></div>
          </div>
          <div class="option">
            <div class="option-content">
              <span class="option-icon">👂</span>
              <span class="option-text">Listening</span>
            </div>
            <div class="radio"></div>
          </div>
          <div class="option">
            <div class="option-content">
              <span class="option-icon">📖</span>
              <span class="option-text">Vocabulary</span>
            </div>
            <div class="radio"></div>
          </div>
        </div>
      </div>

      <button class="continue-button">Continue</button>
    </div>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const options = document.querySelectorAll('.option')
        const backButton = document.querySelector('.back-button')
        const continueButton = document.querySelector('.continue-button')

        let selectedOption = null

        // 初始禁用Continue按钮
        continueButton.classList.add('disabled')

        // 检查本地存储中是否有之前选中的选项
        const storedData = localStorage.getItem('whatArae')
        if (storedData) {
          const { value } = JSON.parse(storedData)
          options.forEach(option => {
            const optionText = option.querySelector('.option-text').textContent.trim()
            if (optionText === value) {
              option.classList.add('selected')
              option.style.backgroundColor = '#EBF5FF'
              option.style.borderColor = '#2b85e4'
              selectedOption = option
              continueButton.classList.remove('disabled')
            }
          })
        }

        options.forEach(option => {
          option.addEventListener('click', function () {
            // 取消所有选项的选中状态
            options.forEach(opt => {
              opt.classList.remove('selected')
              opt.style.backgroundColor = ''
              opt.style.borderColor = '#e0e0e0'
            })

            // 切换当前选项的选中状态
            if (this.classList.contains('selected')) {
              this.classList.remove('selected')
              selectedOption = null
              continueButton.classList.add('disabled')
            } else {
              this.classList.add('selected')
              selectedOption = this
              this.style.backgroundColor = '#EBF5FF'
              this.style.borderColor = '#2b85e4'
              continueButton.classList.remove('disabled')
            }
          })
        })

        backButton.addEventListener('click', function () {
          window.location.href = 'IStruggle.html'
        })

        continueButton.addEventListener('click', function () {
          if (selectedOption) {
            // 获取页面标题和当前页面名称
            const pageTitle = document.querySelector('.question-title').textContent.trim()
            const pageName = window.location.pathname.split('/').pop().split('.')[0]
            const selectedValue = selectedOption.querySelector('.option-text').textContent.trim()
            const selectedIcon = selectedOption.querySelector('.option-icon').textContent.trim()

            // 创建数据对象
            const data = {
              title: pageTitle,
              value: selectedValue,
              icon: selectedIcon,
              area: selectedValue.toLowerCase(), // 该区域的识别码
            }

            // 以JSON格式存储到localStorage
            localStorage.setItem(pageName, JSON.stringify(data))

            window.location.href = 'helpYou.html'
          } else {
            alert('Please select an option before continuing')
          }
        })
      })
    </script>
  </body>
</html>
